<template>
	<div class="home">
		<div class="manage" @click="isShowzujian">
			<h4 :value="'h4'">人力资源管理</h4>
			<el-col :span="8">
				<li v-bind:value="'swdy1'">
					<div class="content">
						<img src="../assets/image/navicon/1.png" />
					</div>
					<span> 求职登记</span>
				</li>
			</el-col>
			<el-col :span="8">
				<li v-bind:value="'swdy2'">
					<div class="content">
						<img src="../assets/image/navicon/2.png" />
					</div>
					<span> 企业用工登记</span>
				</li>
			</el-col>
			<el-col :span="8">
				<router-link :to="{name: 'count'}" class='init' v-bind:value="'swdy3'">
					<li v-bind:value="'swdy3'">
						<div class="content">
							<img src="../assets/image/navicon/3.png" />
						</div>
						<span> 人才和企业查询统计</span>
					</li>
				</router-link>

			</el-col>
			<h4 :value="'h4'">就业培训</h4>
			<el-col :span="8">
				<router-link :to="{name: 'skill'}" class='init' v-bind:value="'swdy4'">
					<li v-bind:value="'swdy4'">
						<div class="content">
							<img src="../assets/image/navicon/4.png" />
						</div>
						<span> 职业技能培训</span>
					</li>
				</router-link>

			</el-col>
			<el-col :span="8">
				<router-link :to="{name: 'chuangye'}" class='init' v-bind:value="'swdy5'">
					<li v-bind:value="'swdy5'">
						<div class="content">
							<img src="../assets/image/navicon/5.png" />
						</div>
						<span> 创业培训</span>
					</li>
				</router-link>
			</el-col>
			<el-col :span="8">
				<router-link :to="{name: 'shiye'}" class='init' v-bind:value="'swdy6'">

					<li v-bind:value="'swdy6'">
						<div class="content">
							<img src="../assets/image/navicon/6.png" />
						</div>
						<span> 失业人员再就业培训</span>
					</li>
				</router-link>

			</el-col>
			<h4 :value="'h4'">就业服务</h4>
			<el-col :span="8">
				<router-link :to="{name: 'xuanchuan'}" class='init' v-bind:value="'swdy7'">

					<li v-bind:value="'swdy7'">
						<div class="content">
							<img src="../assets/image/navicon/7.png" />
						</div>
						<span>就业政策宣传</span>
					</li>
				</router-link>

			</el-col>
			<el-col :span="8">
				<router-link :to="{name: 'biyeji'}" class='init' v-bind:value="'swdy8'">

					<li v-bind:value="'swdy8'">
						<div class="content">
							<img src="../assets/image/navicon/8.png" />
						</div>
						<span> 毕业季、用工季人才招聘会</span>
					</li>
				</router-link>

			</el-col>
			<el-col :span="8">
				<router-link :to="{name: 'zhengce'}" class='init' v-bind:value="'swdy9'">

					<li v-bind:value="'swdy9'">
						<div class="content">
							<img src="../assets/image/navicon/9.png" />
						</div>
						<span> 企业用工政策发布</span>
					</li>
				</router-link>

			</el-col>
			<el-col :span="8">
				<router-link :to="{name: 'buzhu'}" class='init' v-bind:value="'swdy10'">

					<li v-bind:value="'swdy10'">
						<div class="content">
							<img src="../assets/image/navicon/10.png" />
						</div>
						<span> 就业、创业扶持资金补助</span>
					</li>
				</router-link>

			</el-col>
			<el-col :span="8">
				<router-link :to="{name: 'xiaxiang'}" class='init' v-bind:value="'swdy11'">

					<li v-bind:value="'swdy11'">
						<div class="content">
							<img src="../assets/image/navicon/11.png" />
						</div>
						<span> 返乡、下乡创业服务</span>
					</li>
				</router-link>

			</el-col>
		</div>
		<div class="detail">
			<div class='list'>
				<el-dialog :visible.sync="zujian.jobShow" :close-on-click-modal='false' title="求职登记" center>
					<job v-on:closejob="closeswdy1" v-if='zujian.jobShow'></job>
				</el-dialog>
				<el-dialog :visible.sync="zujian.useShow" :close-on-click-modal='false' title="企业用工登记" center>
					<usesw v-if='zujian.useShow'  v-on:closeuse="closeswdy2"></usesw>
				</el-dialog>
			</div>
		</div>
		<div class="diolog">
			<!-- ----占位符之人才和企业查询统计----- -->
			<el-dialog :visible.sync="zujian.countShow" v-if='zujian.swdycount' :close-on-click-modal='false' :before-close="handleClosecount" center>
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</el-dialog>
			<!-- ----占位符之职业技能培训----- -->
			<el-dialog :visible.sync="zujian.skillShow" v-if='zujian.swdyskill' :close-on-click-modal='false' :before-close="handleCloseskill" center>
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</el-dialog>
			<!-- ----占位符之创业培训----- -->
			<el-dialog :visible.sync="zujian.chuangyeShow" v-if='zujian.swdychuangye' :close-on-click-modal='false' :before-close="handleClosechuangye" center>
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</el-dialog>
			<!-- ----占位符之失业人员再就业----- -->
			<el-dialog :visible.sync="zujian.shiyeShow" v-if='zujian.swdyshiye' :close-on-click-modal='false' :before-close="handleCloseshiye" center>
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</el-dialog>
			<el-dialog :visible.sync="zujian.xuanchuanShow" v-if='zujian.swdyxuanchuan' :close-on-click-modal='false' :before-close="handleClosexuanchuan" center>
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</el-dialog>
			<!-- ----占位符之毕业季----- -->
			<el-dialog :visible.sync="zujian.biyejiShow" v-if='zujian.swdybiyeji' :close-on-click-modal='false' :before-close="handleClosebiyeji" center>
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</el-dialog>
			<!-- ----占位符之企业用工政策发布----- -->
			<el-dialog :visible.sync="zujian.zhengceShow" v-if='zujian.swdyzhengce' :close-on-click-modal='false' :before-close="handleClosezhengce" center>
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</el-dialog>
			<!-- ----占位符之就业创业扶持资金补助----- -->
			<el-dialog :visible.sync="zujian.buzhuShow" v-if='zujian.swdybuzhu' :close-on-click-modal='false' :before-close="handleClosebuzhu" center>
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</el-dialog>
			<!-- ----占位符之返乡下乡创业服务----- -->
			<el-dialog :visible.sync="zujian.xiaxiangShow" v-if='zujian.swdyxiaxiang' :close-on-click-modal='false' :before-close="handleClosexiaxiang" center>
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</el-dialog>
		</div>

	</div>
</template>
<script type="text/javascript">
	import {mapState} from 'vuex'
	import job from '@/pages/manpower/job';
	import usesw from '@/pages/manpower/use';
	export default {
		components: {
			job,
			usesw

		},
		data() {
			return {
				zujian: {
					jobShow: false,
					useShow: false,
					countShow: false,
					swdycount: false,
					xiaxiangShow: false,
					swdyskill: false,
					chuangyeShow: false,
					swdychuangye: false,
					shiyeShow: false,
					swdyshiye: false,
					xuanchuanShow: false,
					swdyxuanchuan: false,
					biyejiShow: false,
					swdybiyeji: false,
					zhengceShow: false,
					swdyzhengce: false,
					buzhuShow: false,
					swdybuzhu: false,
					xiaxiangShow: false,
					swdyxiaxiang: false,
				},

			}
		},
		created() {

		},
		methods: {
			isShowzujian(event) {
				let target = event.target.getAttribute('value') || event.target.parentNode.getAttribute('value') || event.target.parentNode.parentNode.getAttribute('value');
				switch(target) {
					case 'swdy1':
						this.zujian.jobShow = true;
						break;
					case 'swdy2':
						this.zujian.useShow = true;
						break;
					case 'swdy3':
						this.zujian.countShow = true;
						this.zujian.swdycount = true;
						break;
					case 'swdy4':
						this.zujian.skillShow = true;
						this.zujian.swdyskill = true;
						break;
					case 'swdy5':
						this.zujian.chuangyeShow = true;
						this.zujian.swdychuangye = true;
						break;
					case 'swdy6':
						this.zujian.shiyeShow = true;
						this.zujian.swdyshiye = true;
						break;
					case 'swdy7':
						this.zujian.xuanchuanShow = true;
						this.zujian.swdyxuanchuan = true;
						break;
					case 'swdy8':
						this.zujian.biyejiShow = true;
						this.zujian.swdybiyeji = true;
						break;
					case 'swdy9':
						this.zujian.zhengceShow = true;
						this.zujian.swdyzhengce = true;
						break;
					case 'swdy10':
						this.zujian.buzhuShow = true;
						this.zujian.swdybuzhu = true;
						break;
					case 'swdy11':
						this.zujian.xiaxiangShow = true;
						this.zujian.swdyxiaxiang = true;
						break;
					default:
						break;
				}
			},
			closeswdy1() {
				this.zujian.jobShow = false;
			},
			closeswdy2() {				
				this.zujian.useShow = false;
			},
			handleClosecount() {
				this.zujian.countShow = false;
				this.zujian.swdycount = false;
			},
			handleCloseskill() {
				this.zujian.skillShow = false;
				this.zujian.swdyskill = false;
			},
			handleClosechuangye() {
				this.zujian.chuangyeShow = false;
				this.zujian.swdychuangye = false;
			},
			handleCloseshiye() {
				this.zujian.shiyeShow = false;
				this.zujian.swdyshiye = false;
			},
			handleClosexuanchuan() {
				this.zujian.xuanchuanShow = false;
				this.zujian.swdyxuanchuan = false;
			},
			handleClosebiyeji() {
				this.zujian.biyejiShow = false;
				this.zujian.swdybiyeji = false;
			},
			handleClosezhengce() {
				this.zujian.zhengceShow = false;
				this.zujian.swdyzhengce = false;
			},
			handleClosebuzhu() {
				this.zujian.buzhuShow = false;
				this.zujian.swdybuzhu = false;
			},
			handleClosexiaxiang() {
				this.zujian.xiaxiangShow = false;
				this.zujian.swdyxiaxiang = false;
			},
		},
		computed:{
			...mapState(['slogin']),	
		},
	
		mounted() {			
			 	if( JSON.parse(sessionStorage.getItem('dlinfo'))==null ){
//			 		this.$router.push("/")			 		
					this.$router.push({name: 'login'});
			 	}
		}
	}
</script>
<style lang="scss" scoped>
	.home {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 204, 255, 0.5);
		background-image: url(../assets/image/u99.png);
		background-repeat: no-repeat;
		background-position: 105% 10%;
		background-size: 600px;
		.manage {
			width: 25%;
			min-width: 250px;
			height: 100%;
			float: left;
			overflow: auto;
			/*background-color: red;*/
			box-sizing: border-box;
			h4:nth-of-type(1) {
				margin: 10% 0 0 10%;
			}
			h4 {
				margin-left: 10%;
			}
			.init {
				text-decoration: none;
				color: black;
			}
			li {
				width: 80px;
				text-align: center;
				list-style: none;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				.content {
					width: 80px;
					height: 80px;
					background-color: white;
					border-radius: 15px;
					cursor: pointer;
					margin-top: 20px;
					margin-bottom: 10px;
					border: 1px solid #ccc;
					&:hover {
						box-shadow: 0px 0px 30px 10px skyblue;
					}
					img {
						margin-top: 15px;
					}
				}
				span {
					font-size: 13px;
					cursor: pointer;
				}
			}
		}
	}
</style>